<template>
  <!-- 上传图片组件 -->
  <div class="form-components">
    <div v-if="disabled" class="form-disabled" style="width: 148px"></div>
    <div v-if="readonly" class="form-readonly"></div>
    <el-upload
      accept="image/*"
      action="#"
      :multiple="multiple"
      :limit="limit"
      :show-file-list="false"
      :on-change="httpRequest"
      :on-remove="httpRequest"
      :on-exceed="onExceed"
      :auto-upload="false"
      list-type="picture-card"
    >
      <i class="el-icon-plus"></i>
      <div v-if="__config__.showTip" slot="tip" class="el-upload__tip">*{{ tips }}</div>
    </el-upload>
    <ImageShow
      v-if="fileList.length"
      :value.sync="fileList"
      isEdit
      :readonly="readonly || disabled"
      style="margin-top: 10px"
      @change="handleChange"
    />
  </div>
</template>

<script>
import ImageShow from "./components/imageShow";
import { getBase64 } from "../../utils";
export default {
  name: "form-image",
  components: {
    ImageShow
  },
  props: {
    // 绑定的输入值
    value: {
      type: [String, Number],
      default: ""
    },
    // 是否只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 表单属性
    __config__: {
      type: Object,
      default: () => {}
    },

    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 	上传的文件字段名
    name: {
      type: String,
      default: ""
    },

    // 最大允许上传个数
    limit: {
      type: Number,
      default: 10
    }
  },
  data() {
    return { fileList: [] };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler: function(nd, od) {
        try {
          // 回显
          this.fileList = JSON.parse(nd) || [];
        } catch (error) {
          console.log("error", error);
        }
      }
    }
  },
  computed: {
    tips() {
      // 最大上传文件+单位
      const sizeUnit = this.__config__.fileSize + this.__config__.sizeUnit;
      return `只能上传不超过${sizeUnit}的图片`;
    }
  },
  methods: {
    // 文件超出个数限制时的钩子
    onExceed() {
      this.$message({
        message: `最多允许上传${this.limit}张图片`,
        type: "info"
      });
    },
    validate(file) {
      // 实际上传的文件大小单位为B，需要将文件大小限制的单位转换为B
      const fileSize = this.__config__.fileSize; // 文件大小
      const fileUnit = this.__config__.sizeUnit; // 文件单位
      // 实际上传的文件大小单位为B，需要将文件大小限制的单位转换为B
      const maxSize =
        fileSize *
        { KB: 1024, MB: Math.pow(1024, 2), GB: Math.pow(1024, 3) }[fileUnit];
      let isLt = file.size < maxSize; // 判断是否超过文件大小
      if (!isLt) {
        this.$message({ message: this.tips, type: "info" });
        return false;
      } else {
        return true;
      }
    },
    async httpRequest(file) {
      if (!this.validate(file)) return;
      const url = await getBase64(file.raw);
      this.fileList.push({ name: file.name, url });
      this.handleChange(this.fileList);
    },

    handleChange(fileArr) {
      this.$emit("input", fileArr.length ? JSON.stringify(fileArr) : null);
    }
  }
};
</script>

<style lang="scss" scope></style>
